<template>
  <div>
    <div class="container radiusBottom">
      <div class="images">
        <div class="img">
          <img :src="styleUrls[dataJson.type][dataJson.stylesType]" />
        </div>
        <div class="buttonSetStyle" @click="alertTag">修改样式</div>
      </div>
    </div>
    <div>
      <!--  @dragstart.capture="dragstartListSort(item,index,$event)"
           @drop.stop="dropListSort(item,index,$event,'imgUrls')"
           @dragover.prevent="dragoverListSort(item,index,$event)"
             draggable="true"-->
      <div
        v-for="(item, index) in dataJson.dataArr"
        :key="index"
        class="container"
        @click="shopTag(index)"
      >
        <div class="title">
          活动{{ index + 1 }}
          <span v-if="index > 0" @click.stop="deleteCurItem(index)">删除</span>
        </div>

        <div class="line">
          <div class="left">标题名称</div>
          <div class="inputContent">
            <el-input
              v-model="item.name"
              class="inputs"
              placeholder="请输入内容"
              type="text"
              maxlength="5"
              show-word-limit
            ></el-input>
          </div>
        </div>
        <div class="line">
          <div class="left">选择活动</div>
          <el-select
            v-model="item.activityId"
            placeholder="请选择"
            style="width: 50%"
            @change="selectTag(index)"
          >
            <el-option
              v-for="itemS in options"
              :key="itemS.limit_id"
              :label="itemS.name"
              :value="itemS.limit_id"
            >
            </el-option>
          </el-select>
          <div
            v-if="arr.includes(item.activityId)"
            style="color:#F56C6C;height: 30px;margin-left: 4%;"
          >
            该活动已结束,请更换活动！
          </div>
        </div>
        <div class="listHeads">
          <el-button
            :disabled="item.shopId.length >= 10"
            @click="btnTag(item.activityId, index)"
          >
            选择商品
          </el-button>

          <span>上下拖拽可排序</span>
        </div>

        <ul>
          <li
            v-for="(shopitem, shopindex) in item.shopId"
            :key="shopindex"
            class="listItem"
            draggable="true"
            @dragstart.capture="dragstartListSort(shopindex, $event)"
            @drop.stop="dropListSort(shopindex, $event, 'shopId', index)"
            @dragover.prevent="dragoverListSort"
          >
            <img
              :src="
                $store.state.qiniu +
                  shopitem.src.split(',')[0] +
                  $store.state.imgRotate
              "
            />
            <span class="name">
              {{ shopitem.goods_name }}
            </span>
            <span class="del" @click="deleteShopIdItems(shopindex, index)">
              删除
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="container">
      <div class="listHeads">
        <el-button :disabled="dataJson.dataArr.length >= 5" @click="add"
          >添加活动</el-button
        >
        <span>最多可添加5个活动</span>
      </div>
    </div> -->
    <activity-shop
      :id="id"
      :visible="visible"
      :activity-type="dataJson.type"
      @out="out"
    />
  </div>
</template>

<script>
import { LIMITCODE } from "@/service/public";
import activityShop from "./toolCom/activityShop";
import { styleUrls } from "../../data";
export default {
  components: {
    activityShop
  },
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      styleUrls,
      options: [],
      arr: [],
      id: -1,
      visible: false,
      idx: -1
    };
  },
  created() {
    this.getList();
  },
  methods: {
    dragstartListSort(index, e) {
      this.$emit("dragstartListSort", index, e);
    },
    dropListSort(index, e, attr, superiorIndex) {
      this.$emit("dropListSort", index, e, attr, 25, superiorIndex);
    },
    dragoverListSort() {},
    deleteCurItem(index) {
      this.$emit("deleteCurItem", index, 25);
      this.$store.commit("spellGroupIndex", 0);
    },
    showdialog(index) {
      this.$emit("showdialog", index);
    },
    chooseLink(index) {
      this.$emit("chooseLink", index);
    },
    add() {
      this.$emit("add", 25);
    },
    alertTag() {
      this.$emit("alertTag", true, this.dataJson.stylesType, 25);
    },
    deleteShopIdItems(index, superiorIndex) {
      this.$emit("deleteShopIdItems", index, 25, superiorIndex);
    },
    selectTag(superiorIndex) {
      let arr = this.dataJson.dataArr;
      arr.forEach(ele => {
        let s = this.options.filter(r => {
          return ele.activityId === r.limit_id;
        });
        ele.stime = s[0]._stime;
        ele.etime = s[0]._etime;
      });
      this.$emit("etimes", arr);
      this.$emit("deleteShopIdItems", "all", 25, superiorIndex);
    },
    shopTag(index) {
      this.$store.commit("limitIndex", index);
    },
    async getList() {
      await LIMITCODE({ page: 1, pageshow: 1000000, status: 0 }).then(
        ({ code, data }) => {
          if (code === 200) {
            this.options = data.list;
            this.options.forEach(ele => {
              if (ele.status === 3) this.arr.push(ele.limit_id);
            });
            let arr = this.dataJson.dataArr;
            arr.forEach(ele => {
              let s = this.options.filter(r => {
                return ele.activityId === r.limit_id;
              });
              ele.stime = s[0]._stime;
              ele.etime = s[0]._etime;
            });
            this.$emit("etimes", arr);
          }
        }
      );
    },
    out(e) {
      if (e) {
        if (e.length > 10) {
          return this.$message.error("最多只能选择10个商品！");
        } else {
          this.visible = false;
        }
        this.dataJson.dataArr[this.idx].shopId = [
          ...this.dataJson.dataArr[this.idx].shopId,
          ...e
        ];
        this.dataJson.dataArr[this.idx].shopId = this.dataJson.dataArr[
          this.idx
        ].shopId.map(ele => {
          ele = JSON.stringify(ele);
          return ele;
        });
        this.dataJson.dataArr[this.idx].shopId = Array.from(
          new Set(this.dataJson.dataArr[this.idx].shopId)
        );
        this.dataJson.dataArr[this.idx].shopId = this.dataJson.dataArr[
          this.idx
        ].shopId.map(ele => {
          ele = JSON.parse(ele);
          return ele;
        });
      } else {
        this.visible = false;
      }
    },
    btnTag(Id, index) {
      this.idx = index;
      if (Id) {
        this.id = Id;
        this.visible = true;
      } else {
        this.$message.error("请先选择活动！");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/decorate.scss";
</style>
